// ui/components/TagFilter.js
export default {
  name: 'TagFilter',
  props: {
    activeTags: {
      type: Array,
      default: () => []
    }
  },
  emits: ['filter-changed'],
  setup(props, { emit }) {
    const { toRefs } = Vue; // Use global Vue object

    const { activeTags } = toRefs(props);

    const onFilterChange = (changedTag, isSelected) => {
      const selectedTagNames = activeTags.value
        .filter(tag => {
          if (tag.name === changedTag.name) {
            return isSelected;
          }
          return tag.selected;
        })
        .map(tag => tag.name);
      
      emit('filter-changed', selectedTagNames);
    };

    return {
      activeTags,
      onFilterChange
    };
  },
  template: `
  <div class="tag-filter-container">
    <h4>话题筛选</h4>
    <div v-if="activeTags && activeTags.length > 0" class="tags-list">
      <div v-for="(tag, index) in activeTags" :key="index" class="tag-item">
        <input 
          type="checkbox" 
          :id="'tag-checkbox-' + index"
          :checked="tag.selected" 
          @change="onFilterChange(tag, $event.target.checked)"
        />
        <label :for="'tag-checkbox-' + index">{{ tag.name }}</label>
      </div>
    </div>
    <div v-else>
      <p>暂无活跃话题</p>
    </div>
  </div>
  `
};